Upload Multiple Files using JavaScript and PHP with Real-Time Validation

Uploading Multiple Files with JavaScript and PHP

Uploading multiple files is a common feature in web applications, especially for handling images or documents. Ensuring that users upload only valid file types is crucial for both security and a smooth user experience. In this tutorial, you’ll learn how to create a multiple file upload form using JavaScript and PHP, complete with client-side file type validation.

By allowing users to upload multiple files without validation, you risk exposing your application to security issues. We’ll build a robust system that lets users select multiple files, checks their types on the client side, and then uploads them to the server using PHP.

Upload Multiple Files with JavaScript and PHP: Real-Time Validation

Are you want to get implementation help, or modify or extend the functionality of this script?

A Tutorialswebsite Expert can do it for you.

Step-1: Setting Up the Environment

Before we dive into the code, ensure you have the following:

  • A web server with PHP support (e.g., Apache, Nginx).
  • A text editor or IDE (e.g., Visual Studio Code, Sublime Text).
  • Basic knowledge of HTML, JavaScript, and PHP.

Suggested Read: How to upload video with a progress bar in PHP

Step-2: Building the HTML Form

First, we’ll create a simple HTML form that allows users to select multiple files. The form will include an onchange event to trigger file type validation as soon as files are selected.

Create a file named “index.php” and copy & paste the below code:

In this form:

  • The input element with type="file" allows users to select files.
  • The multiple attribute allows selecting multiple files at once.
  • A button triggers the JavaScript function to upload the files.
Upload Multiple Files with JavaScript and PHP

Step-3: Implementing JavaScript for File Validation and Upload

Next, we’ll write the JavaScript code that handles file validation and the actual upload process. This code validates file types as soon as users select them and prevents invalid files from uploading.

Create a file named “upload.js” and copy & paste the below code:

Here’s what’s happening:

  • Onchange Event: The fileValidation() function is triggered every time a user selects files. This is set up in the HTML using onchange="return fileValidation()".
  • File Type Validation: The code iterates over each selected file and checks its type against the allowed types.
  • Displaying Error Messages: If invalid files are detected, the error messages are displayed inside the status div, and the function returns early, preventing the upload.
  • Allowed File Types: The array allowedTypes contains the MIME types of the files that are allowed to be uploaded. This example permits only JPEG, PNG, and GIF images.
  • We create a FormData object to hold the files.
  • The files are retrieved from the input element and appended to the FormData object.
  • An XMLHttpRequest is used to send the FormData to a PHP script (upload.php) on the server.
  • Upon completion, the system displays a message to the user indicating whether the upload succeeded or failed.

Step-4: PHP Script to Handle File Upload

Finally, let’s create the PHP script that will handle the uploaded files. This script will validate the file types on the server side and save the files to a designated directory.

Also Read: Drag and Drop File Upload using DropzoneJS, PHP & MySQL

Create a file named upload.php:

This PHP script:

  • Checks if the upload directory exists, and if not, it creates one.
  • Loops through each uploaded file, moving it from the temporary location to the upload directory.
  • Provides feedback for each file upload, indicating success or failure.

Are you want to get implementation help, or modify or extend the functionality of this script?

A Tutorialswebsite Expert can do it for you.

Conclusion

Uploading multiple files using JavaScript and PHP is a straightforward process. The combination of JavaScript’s ability to handle files on the client side and PHP’s server-side processing power makes it easy to create a user-friendly file upload experience. This tutorial should provide you with a solid foundation to implement multiple file uploads in your own web applications.

Thanks for reading 🙏, I hope you found Upload multiple files using JavaScript and PHP tutorial helpful for your project. Keep learning! If you face any problems – I am here to solve your problems.

Related posts